<!--  -->
<template>
  <div class="bottom-bar">
    <div class="left">
      <div class="l_item">
        <i class="icon service"></i>
        <div class="text">客服</div>
      </div>
      <div class="l_item">
        <i class="icon shop"></i>
        <div class="text">店铺</div>
      </div>
      <div class="l_item"  @click="change">
        <i class="icon collect"  :class="{active:isSelect}"></i>
        <div class="text">收藏</div>
      </div>
    </div>

    <div class="right">
      <div class="add" @click="addToDart">加入购物车</div>
      <div class="buy">购买</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSelect:false
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    change(){
       this.isSelect = ! this.isSelect
    },

    addToDart(){
      this.$emit('addGoodToCart')
    }
  },
};
</script>
<style lang='scss' scoped>
.bottom-bar {
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
  .left {
    width: 50%;
    margin-top: 10px;
    display: flex;
    font-size: 13px;
    .l_item {
      flex: 1;
      text-align: center;
      .icon {
        display: block;
        width: 22px;
        height: 22px;
        margin: 5px auto 2px;
        background: url("~assets/img/detail/detail_bottom.png") 0 0/100%;
      }
      .service {
        background-position: 0 -52px;
      }
      .shop {
        background-position: 0 -98px;
      }
      .active {
        background-position: 0 -27px;
      }
    }
  }
  .right {
    color: #eee;
    width: 50%;
    display: flex;
    &>div{
      flex: 1;
      text-align: center;
      line-height: 60px;
      padding: 0 3px;
      font-weight: bold;
    }
    .add{
      background-color:#f5e12f;
    }
    .buy{
      background-color: #FF4400;
    }
  }
}
</style>